<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ include file="/page/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%@ include file="/adapter/adapter-easyui.jsp" %>
<%@ include file="/adapter/adapter-bootstrap.jsp" %>
<%@ include file="/adapter/adapter-lanren.jsp" %>
<link href="${pageContext.request.contextPath}/frontframe/easyui/themes/easyui-extend.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">

 function save(){
	var str_data=$("#tradeinfo input").map(function(){
		   return ($(this).attr("name")+'='+$(this).val());
		 }).get().join("&") ;
    $.ajax({
        url:"${ctx}/sPageParamTrade/updateSpageParamTrade",
        type: "POST",      
        dataType:"json",
        data: str_data,
        async: false,
        success: function(data) {
        	if(data.flag>0){
	            alert("保存成功！");	
	            //window.location.reload();
        	}
        },
        error: function() {
          alert("error");
        }
      });
	
}




/* function  addInput(){
	var $win;
	$win = $('#testw').window({
	    title: '添加课程设置信息',
	    width: 820,
	    height: 450,
	    top: ($(window).height() - 820) * 0.5,
	    left: ($(window).width() - 450) * 0.5,
	    shadow: true,
	    modal: true,
	    iconCls: 'icon-add',
	    closed: true,
	    minimizable: false,
	    maximizable: false,
	    collapsible: false
	}); 
	$('#testw').window('open');		
}
 */

 function  goBack(){
		//window.close();
		window.history.back(-1);
}
 
</script>
</head>
<body>

	<div id="p" class="easyui-panel" title="交易信息" style="width:100%;height:200px;padding:10px;" >
              <form class="form-horizontal" role="form"  id="tradeinfo">
                       <input  id="ds_name" name="tradeId" type="hidden"  value="${sPageParamTrade.tradeId }" />
                       <input  id="ds_name" name="pageId" type="hidden"  value="${sPageParamTrade.pageId }" />
                       <div class="form-group">
<%--                           <label class="col-xs-1 control-label" for="ds_name">移动标识${appid}</label>
                          <div class="col-xs-3">
                             <input class="form-control" id="ds_name" name=appId type="text"  readonly="readonly"  value="${appid}" placeholder="标准新增页面模板"/>
                          </div>  
                          <label class="col-xs-1 control-label" for="ds_name">交易标识</label>
                          <div class="col-xs-3">
                             <input class="form-control" id="ds_name" name="tradeId" type="text" readonly="readonly"  value="${str[1]}" placeholder="标准新增页面模板"/>
                          </div> --%>
                          <label class="col-xs-1 control-label" for="pageId">归属页面标识</label>
                          <div class="col-xs-3">
                             <input class="form-control" id="pageId" name="pageId" type="text"  readonly="readonly"  value="${sPageParamTrade.pageId }" placeholder="标准新增页面模板"/>
                          </div> 
                          <label class="col-xs-1 control-label" for="tradeCode">交易码</label>
                          <div class="col-xs-3">
                             <input class="form-control" id="tradeCode"  name="tradeCode" type="text"  value="${sPageParamTrade.tradeCode }" placeholder="标准新增页面模板"/>
                          </div> 
                          <label class="col-xs-1 control-label" for="tradeName">交易名称</label>
                          <div class="col-xs-3">
                             <input class="form-control" id="tradeName" name="tradeName" type="text"    value="${sPageParamTrade.tradeName }" placeholder="标准新增页面模板"/>
                          </div>                            
                       </div>
                       <div class="form-group">
                          <label class="col-xs-1 control-label" for="tradeDesc">交易描述</label>
                          <div class="col-xs-3">
                             <input class="form-control" id="tradeDesc" name="tradeDesc" type="text"   value="${sPageParamTrade.tradeDesc }" placeholder="标准新增页面模板"/>
                          </div> 
                          <label class="col-xs-1 control-label" for="tradeInFormat">交易输入格式化</label>
                          <div class="col-xs-3">
                             <input class="form-control" id="tradeInFormat" name="tradeInFormat" type="text"    value="${sPageParamTrade.tradeInFormat }" placeholder="标准新增页面模板"/>
                          </div>  
                          <label class="col-xs-1 control-label" for="tradeOutFormat">交易输出格式化</label>
                          <div class="col-xs-3">
                             <input class="form-control" id="tradeOutFormat" name="tradeOutFormat" type="text"   value="${sPageParamTrade.tradeOutFormat }" placeholder="标准新增页面模板"/>
                          </div>                           
                       </div>
                       	  <div class="form-group text-center">
					         <button type="button" class="btn btn-default"  onclick="save();">保存</button>
					         <button type="button" class="btn btn-default"  onclick="goBack();">返回</button>
                          </div>
<!--       </div> -->
                </form>
	</div>
	<div>
	<div  style="width:50%;height:300px;float: left;">
		<div id="p" class="easyui-panel" title="输入配置" style="width:100%;height:100%;padding:10px;float: left;" >
              
              	<input type="button" class="btn btn-default"  id="inputButton" value="增加"  onclick="addInput();"/> 
				<input type="button" class="btn btn-default" value="删除"  onclick="deleteTrade();"/><br>
               <table class="table table-bordered" style="" width="100%" cellspacing="1" cellpadding="0" border="0">
				<thead>
					<tr class="active" align="center">
						<td>选择</td>
						<td style="display: none">唯一键</td>
						<td style="display: none">交易唯一标识</td>
						<td>交易要素类型</td>
						<td>交易要素代码</td>
						<td>交易要素名称</td>
					</tr>
				</thead>				
				<tbody>	
				<c:forEach items="${listIn}" var="tradeIn"  varStatus="s" >
					<tr  align="center">
						<td><input type="radio" name="check" id="check" value="15"></td>
						<td style="display: none">${tradeIn.recordKey}</td>
						<td style="display: none">${tradeIn.tradeId}</td>
						<td>${tradeIn.tradeElementType}</td>
						<td>${tradeIn.tradeElementCode}</td>
						<td>${tradeIn.tradeElementName}</td>
					</tr>
				</c:forEach>																
				</tbody>
			</table>
	   </div>
	 </div>
	 <div  style="width:50%;height:300px;float: left;">
		<div id="p" class="easyui-panel" title="输出配置" style="width:100%;height:100%;padding:10px;float: left; " >
		
		        <input type="button" class="btn btn-default"  id="outputButton" value="增加"  onclick="addModules();"/> 
				<input type="button" class="btn btn-default" value="删除"  onclick="deleteTrade();"/><br>
              <table class="table table-bordered" style="" width="100%" cellspacing="1" cellpadding="0" border="0">
				<thead>
					<tr class="active" align="center">
						<td>选择</td>
						<td style="display: none">唯一键</td>
						<td style="display: none">交易唯一标识</td>
						<td>交易要素类型</td>
						<td>交易要素代码</td>
						<td>交易要素名称</td>
					</tr>		
				</thead>				
				<tbody>	
					<c:forEach items="${listOut}" var="tradeOut"  varStatus="s" >
					<tr  align="center">
						<td><input type="radio" name="check" id="check" value="15"></td>
						<td style="display: none">${tradeOut.recordKey}</td>
						<td style="display: none">${tradeOut.tradeId}</td>
						<td>${tradeOut.tradeElementType}</td>
						<td>${tradeOut.tradeElementCode}</td>
						<td>${tradeOut.tradeElementName}</td>
					</tr>
					</c:forEach>																
				</tbody>
			</table>
	</div>
	</div>
	</div>
	
	
	
<!-- <div id="testw" class="easyui-window" title="Login" >
    <div>
        欢迎访问http://www.my400800.cn
    </div>
    <div style="padding: 5px; text-align: center;">
        <a href="#" class="easyui-linkbutton" icon="icon-ok">Ok</a> <a href="#" class="easyui-linkbutton"
            icon="icon-cancel">Cancel</a>
    </div>
</div> -->


<div class="theme-popover">
     <div class="theme-poptit">
          <a href="javascript:;" title="关闭" class="close">×</a>
          <h3>填写交易配置信息</h3>
     </div>
     <div class="theme-popbod dform">
           <form class="theme-signin" name="loginform" id="tradeInout"  action="" method="post">
                 <li style="list-style-type:none;"> 唯一键&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ：<input  type="text" name="recordKey" value="" size="20" /><br></li>     
                 <li style="list-style-type:none;"> 交易唯一标识：<input  type="text" name="tradeId" readonly="readonly" value="${sPageParamTrade.tradeId }" size="20" /><br></li>     
                 <li style="list-style-type:none;"> 交易要素类型：<input type="hidden"  id="element_Type" readonly="readonly" name="tradeElementType" value="" size="20" />
                              <select  id="elementType" name="elementType"  onclick="changeValue(this.value)" >
                                  <option value="1" >输入要素</option> 
                                  <option value="2" >输出要素</option> 
                             </select>
                 <br></li>      
                 <li style="list-style-type:none;"> 交易要素代码：<input type="text" name="tradeElementCode" value="" size="20" /><br></li>      
                 <li style="list-style-type:none;"> 交易要素名称：<input  type="text" name="tradeElementName" value="" size="20" /><br></li>     
                 <li style="list-style-type:none;"> <input class="btn btn-primary" type="button" name="submit" value="保存"  onclick="saveInout()" /></li>
           </form>
     </div>
</div>
<div class="theme-popover-mask"></div>
	
<script type="text/javascript">
jQuery(document).ready(function($) {
	$('#inputButton').click(function(){
		$('.theme-popover-mask').fadeIn(200);
		$('.theme-popover').slideDown(400);
		//$('#element_Type').text('1');
		$("#element_Type").attr("value",'1');
		$('#elementType').find("option[value='1']").attr("selected",true); 
	});
	$('#outputButton').click(function(){
		$('.theme-popover-mask').fadeIn(200);
		$('.theme-popover').slideDown(400);
		//$('#element_Type').text('2');
		$("#element_Type").attr("value",'2');
		$('#elementType').find("option[value='2']").attr("selected",true); 
	});
	$('.theme-poptit .close').click(function(){
		$('.theme-popover-mask').fadeOut(200);
		$('.theme-popover').slideUp(400);
	});

});

//保存交易输入输出要素
function saveInout(){
	var str_data=$("#tradeInout input").map(function(){
		   return ($(this).attr("name")+'='+$(this).val());
		 }).get().join("&") ;
     $.ajax({
        url:"${ctx}/sPageParamTradeInout/saveSPageParamTradeInout",
        type: "POST",      
        dataType:"json",
        data: str_data,
        async: false,
        success: function(data) {
        	if(data.flag>0){
	            alert("保存成功！");	
	            window.location.reload();
        	}
// 	          $.each(data, function(index, element) {
//             window.location.reload();
//          });
        },
        error: function() {
          alert("error");
        }
      }); 
	
}

function  changeValue(element_Type){
	   document.getElementById("element_Type").value=element_Type;	
}

function deleteTrade(){
	if(record_key!=""){
    $.ajax({
        url:"${ctx}/sPageParamTradeInout/delSPageParamTradeInout?recodekey="+record_key,
        type: "POST",      
        dataType:"json",
        async: false,
        success: function(data) {
        	if(data.flag>0){
	            alert("删除成功！");	
	            window.location.reload();
        	}
/* 	          $.each(data, function(index, element) {
             window.location.reload();
          }); */
        },
        error: function() {
          alert("error");
        }
      });
	}else{
		alert("请先选择要删除的数据！");
	}
}


var preRow = null;
var record_key="";
$('tbody tr').bind('click', function() {

	var rowIndex = $(this).prevAll().length+1;
	if(rowIndex <1) return;
	
	if(preRow != null){
		preRow.removeClass("active");
	}
	$(this).addClass("active");
	preRow = $(this);
	
	record_key=$(this).find("td").eq(1).text();
	// 行单击后事件(传入行号，应用ID,应用名称信息)
	rowClickAfter(rowIndex,
			$(this).find("td").eq(1).text(),
			$(this).find("td").eq(2).text());
});

</script>
</body>
</html>
